"use client"

import Link from "next/link"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { 
  Wrench, 
  Zap, 
  Wind, 
  Radio, 
  Gauge,
  Loader2,
  AlertCircle
} from "lucide-react"
import { Sidebar } from "@/components/sidebar"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { useDashboardStats } from "@/hooks/use-dashboard-stats"

export default function DashboardPage() {
  const { data, stats, totalDevices, loading, error } = useDashboardStats();

  if (loading) {
    return (
      <div className="flex h-screen bg-gray-50">
        <Sidebar dataCounts={{}} />
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <Loader2 className="h-8 w-8 animate-spin mx-auto mb-4" />
            <p className="text-gray-600">正在加载数据...</p>
          </div>
        </div>
      </div>
    );
  }

  if (error || !stats) {
    return (
      <div className="flex h-screen bg-gray-50">
        <Sidebar dataCounts={{}} />
        <div className="flex-1 flex items-center justify-center">
          <Alert className="max-w-md">
            <AlertCircle className="h-4 w-4" />
            <AlertDescription>
              {error || '加载数据时出现错误，请刷新页面重试。'}
            </AlertDescription>
          </Alert>
        </div>
      </div>
    );
  }

  const getSpecialtyDetail = (specialtyName: string) => {
    return data?.specialtyDetails?.find(detail => detail.name === specialtyName);
  };

  const specialtyData = [
    {
      name: "配管专业",
      total: stats?.piping || 0,
      typeCount: data?.typeStats?.piping || 0,
      detail: getSpecialtyDetail("配管专业"),
      icon: Wrench,
      href: "/piping"
    },
    {
      name: "电气专业",
      total: stats?.electrical || 0,
      typeCount: data?.typeStats?.electrical || 0,
      detail: getSpecialtyDetail("电气专业"),
      icon: Zap,
      href: "/electrical"
    },
    {
      name: "暖通专业",
      total: stats?.hvac || 0,
      typeCount: data?.typeStats?.hvac || 0,
      detail: getSpecialtyDetail("暖通专业"),
      icon: Wind,
      href: "/hvac"
    },
    {
      name: "通信专业",
      total: stats?.communication || 0,
      typeCount: data?.typeStats?.communication || 0,
      detail: getSpecialtyDetail("通信专业"),
      icon: Radio,
      href: "/communication"
    },
    {
      name: "仪表专业",
      total: stats?.instrumentation || 0,
      typeCount: data?.typeStats?.instrumentation || 0,
      detail: getSpecialtyDetail("仪表专业"),
      icon: Gauge,
      href: "/instrumentation"
    },
  ];

  return (
    <div className="flex h-screen bg-gray-50">
      {/* 侧边栏 */}
      <Sidebar
        dataCounts={{
          piping: stats?.piping || 0,
          electrical: stats?.electrical || 0,
          hvac: stats?.hvac || 0,
          communication: stats?.communication || 0,
          instrumentation: stats?.instrumentation || 0
        }}
      />

      {/* 主内容区域 */}
      <div className="flex-1 flex flex-col overflow-hidden">
        {/* 顶部标题栏 */}
        <div className="bg-white border-b px-6 py-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-gray-900">石楼油库实体对象管理系统</h1>
            </div>
          </div>
        </div>

        {/* Dashboard 内容 */}
        <div className="flex-1 overflow-auto p-6">
          {/* 各专业数据录入与校验情况可视化 */}
          <div className="space-y-6 mb-8">
            <div className="space-y-2">
              <h2 className="text-2xl font-bold text-gray-900">各专业数据录入与校验情况</h2>
              <p className="text-muted-foreground">专业数据录入和校验进度总览</p>
            </div>

            {/* 总体统计卡片 */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
              <Card className="bg-blue-500 text-white">
                <CardContent className="p-4">
                  <div className="text-center">
                    <div className="text-2xl font-bold text-white">{data?.totalDeviceTypes || 0}</div>
                    <div className="text-sm text-blue-100">设备类型数</div>
                  </div>
                </CardContent>
              </Card>
              <Card className="bg-purple-500 text-white">
                <CardContent className="p-4">
                  <div className="text-center">
                    <div className="text-2xl font-bold text-white">{totalDevices}</div>
                    <div className="text-sm text-purple-100">设备总数</div>
                  </div>
                </CardContent>
              </Card>
              <Card className="bg-green-600 text-white">
                <CardContent className="p-4">
                  <div className="text-center">
                    <div className="text-2xl font-bold text-white">{data?.overallEntryRate || 0}%</div>
                    <div className="text-sm text-green-100">数据总录入率</div>
                    <div className="text-xs text-green-200 mt-1">
                      {data?.enteredDevices || 0} / {totalDevices} 设备
                    </div>
                  </div>
                </CardContent>
              </Card>
              <Card className="bg-amber-500 text-white">
                <CardContent className="p-4">
                  <div className="text-center">
                    <div className="text-2xl font-bold text-white">{data?.overallValidationRate || 0}%</div>
                    <div className="text-sm text-amber-100">数据总校验率</div>
                    <div className="text-xs text-amber-200 mt-1">
                      {data?.validatedDevices || 0} / {data?.enteredDevices || 0} 已录入
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* 专业卡片 */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {specialtyData.map((spec) => (
                <Link key={spec.name} href={spec.href} className="block group">
                  <Card className="transition hover:shadow-lg hover:border-primary cursor-pointer">
                    <CardHeader className="flex flex-row items-center justify-between pb-2">
                      <CardTitle className="text-base font-medium group-hover:text-primary">{spec.name}</CardTitle>
                      <spec.icon className="w-5 h-5 text-muted-foreground group-hover:text-primary" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">{spec.total}</div>
                      <div className="text-sm text-muted-foreground mb-2">设备总数</div>
                      <div className="mt-2 pt-2 border-t space-y-1">
                        <div className="flex justify-between text-sm text-muted-foreground">
                          <span>设备类型:</span>
                          <span className="font-semibold text-blue-600">{spec.typeCount}</span>
                        </div>
                        <div className="flex justify-between text-sm text-muted-foreground">
                          <span>录入率:</span>
                          <span className="font-semibold text-green-600">
                            {spec.detail?.entryRate || 0}%
                            <span className="text-xs ml-1">
                              ({spec.detail?.enteredDevices || 0}/{spec.total})
                            </span>
                          </span>
                        </div>
                        <div className="flex justify-between text-sm text-muted-foreground">
                          <span>校验率:</span>
                          <span className="font-semibold text-orange-600">
                            {spec.detail?.validationRate || 0}%
                            <span className="text-xs ml-1">
                              ({spec.detail?.validatedDevices || 0}/{spec.detail?.enteredDevices || 0})
                            </span>
                          </span>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </Link>
              ))}
            </div>

{/* 功能演示链接 - 已隐藏
            <div className="mt-8 p-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border border-blue-200">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">🎯 功能演示</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <Link
                  href="/demo-specialty-filter"
                  className="block p-4 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all"
                >
                  <div className="flex items-center space-x-3">
                    <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                      <span className="text-blue-600 font-bold">🔧</span>
                    </div>
                    <div>
                      <h4 className="font-medium text-gray-900">专业过滤演示</h4>
                      <p className="text-sm text-gray-600">测试不同角色的专业数据访问权限</p>
                    </div>
                  </div>
                </Link>

                <Link
                  href="/test-permissions"
                  className="block p-4 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all"
                >
                  <div className="flex items-center space-x-3">
                    <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                      <span className="text-green-600 font-bold">🔒</span>
                    </div>
                    <div>
                      <h4 className="font-medium text-gray-900">权限测试</h4>
                      <p className="text-sm text-gray-600">详细的字段级权限测试工具</p>
                    </div>
                  </div>
                </Link>

                <Link
                  href="/demo-permissions"
                  className="block p-4 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all"
                >
                  <div className="flex items-center space-x-3">
                    <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                      <span className="text-purple-600 font-bold">🎮</span>
                    </div>
                    <div>
                      <h4 className="font-medium text-gray-900">权限系统演示</h4>
                      <p className="text-sm text-gray-600">完整的权限系统功能演示</p>
                    </div>
                  </div>
                </Link>
              </div>
            </div>
            */}

          </div>
        </div>
      </div>
    </div>
  )
}